<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    div {
        width: 200px;
        height: 250px;
        background-color: beige;
        display: inline-block;
    }
    
    img {
        width: 100px;
    }
</style>

<body>

    <div class="box">

    </div>



</body>
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<script>
    var arr = [{
        id: 1,
        name: '连衣裙',
        price: 50,
        num: 1,
        img: 'http://img.alicdn.com/img/i2/736404203/O1CN01hL5dzv1gv1Xjy4LuA_!!736404203-0-alimamacc.jpg',
    }, {
        id: 2,
        name: '保暖衣',
        price: 30,
        num: 1,
        img: 'http://img.alicdn.com/img/i1/25971949/O1CN012WaisZ1QGgw207FgU_!!0-saturn_solar.jpg',
    }, {
        id: 3,
        name: '长袖',
        price: 20,
        num: 1,
        img: 'http://img.alicdn.com/img/i2/41983780/O1CN01277D4L1dnI0uGXpxg_!!0-saturn_solar.jpg',
    }]



    arr.forEach(item => {
        $('.box').append(`
        <div>
        <h4>名字:${item.name}</h4>
         <h4>价格:${item.price}</h4>
        <img src="${item.img}">
        <button onclick="xq(${item.id})">详情</button>
         </div>
        `)
    })


    function xq(id) {
        var a = arr.find(item => item.id == id)
        sessionStorage.setItem('id', id)
        location.assign(`./详情.html`)
    }
</script>


</html>